<template>
	<view>
		<view class="container" style="display: flex;">
			<view style="flex: 1;" class="pb10">
				<view style="display: flex;">
					<view style="flex: 1;  display: flex;">
						<text style="font-size: 18px; font-weight: bold; " class="mr10">{{formData.title}}</text>
						<view v-if="formData.status==1" style="background-color: #00aaff; color:#FFFFFF; padding: 3px 10px; border-radius: 15px;">在售</view>
						<view v-if="formData.status==0" style="background-color: #c3c3c3; color:#FFFFFF; padding: 3px 10px; border-radius: 15px;">下架</view>
					</view>
				</view>
				<view style="display: flex;" class="mt10 mb5">
					<view class="mr5"><u-tag :text="formData.type" plain size="mini"></u-tag></view>
					<view class="mr5"><u-tag :text="formData.paytype" plain size="mini"></u-tag></view>
				</view>
				<view style="margin-top: 15px;">
					创建时间:{{formData.createtime}}
				</view>
			</view>
			<view style="padding: 5px;" @click="handleEdit">
				<u-icon name="edit-pen-fill" size="18"></u-icon>
			</view>
		</view>
		
		<view class="container">
			<view  class="title">报价单 ({{formData.paylist.length}}个)</view>
		
		<view style="padding: 5px 10px;">
			<view style="display: flex;">
				<view style="border: 1px solid #f8f8f8;background-color: #FFFFFF; flex: 1; text-align: center; line-height: 30px;">
					名称
				</view>
				<view style="border: 1px solid #f8f8f8;background-color: #FFFFFF;flex: 1;text-align: center;line-height: 30px;">
					课时
				</view>
				<view style="border: 1px solid #f8f8f8;background-color: #FFFFFF;flex: 1; text-align: center;line-height: 30px;">
					价格(元)
				</view>
			</view>
			
			<view style="display: flex;" v-for="(item,index) in formData.paylist" :key="index">
				<view style="border: 1px solid #f8f8f8;background-color: #FFFFFF; flex: 1; text-align: center; line-height: 30px;">
					{{item.title}}
				</view>
				<view style="border: 1px solid #f8f8f8;background-color: #FFFFFF;flex: 1;text-align: center;line-height: 30px;">
					{{item.times}}
				</view>
				<view style="border: 1px solid #f8f8f8;background-color: #FFFFFF;flex: 1; text-align: center;line-height: 30px;">
					{{item.amount}}
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					id: -1,
					title: "中国舞",
					type: "班级授课",
					paytype: "按课时",
					createtime: "2021-11-20 18:33:22",
					status: 1,
					paylist: [{
							title: "单次",
							times: 1,
							amount: 100
						},
						{
							title: "一学期",
							times: 30,
							amount: 3000
						},
						{
							title: "体验课",
							times: 1,
							amount: 9.9
						}
					]
				}
			}
		},
		onLoad(option) {
			this.formData.id = option.id;
			this.loadData();
		},
		methods: {
			loadData() {

			},
			handleEdit(){
				uni.showToast({
					title:"编辑详情",
					icon:'none'
				})
			}
		}
	}
</script>

<style>

</style>